//智慧转化与共享动态
<template>
  <div class="root">
    <!-- 智慧转化与共享动态 -->
    <div class="dynamic">智慧转化与共享动态</div>
    <!-- 主题作品 -->
    <div class="dynamic-row">
      <div class="dynamic-column dynamic-img"><img :src="productionSrc" /></div>
      <div class="dynamic-column dynamic-num">101</div>
      <div class="dynamic-column dynamic-title">主题作品</div>
    </div>
    <!-- 创作人数 -->
    <div class="dynamic-row">
      <div class="dynamic-column dynamic-img"><img :src="authorSrc" /></div>
      <div class="dynamic-column dynamic-num">99</div>
      <div class="dynamic-column dynamic-title">位创作人</div>
    </div>
    <!-- 注册用户 -->
    <div class="dynamic-row">
      <div class="dynamic-column dynamic-img"><img :src="userSrc" /></div>
      <div class="dynamic-column dynamic-num">987</div>
      <div class="dynamic-column dynamic-title">注册用户</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DynamicArea",
  data() {
    return {
      productionSrc: require("@/assets/home/production.png"),
      authorSrc: require("@/assets/home/author.png"),
      userSrc: require("@/assets/home/user.png"),
    };
  }
};
</script>

<style scoped>
.root {
  width: 300px;
  height: 300px;
  background-color: #00b0f0;
  position: absolute;
  bottom: 0px;
}
.dynamic {
  color: white;
  align-items: center;
  font-size: 20px;
  text-align: center;
  padding: 40px;
}
.dynamic-row {
  display: flex;
  padding: 10px;
}
.dynamic-column {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
img{
  height: 25px;
  width: 25px;
}
.dynamic-num {
  background-color: white;
  text-align: right;
  width: 100px;
  margin-left: 20px;
  margin-right: 20px;
}

.dynamic-title {
  background-color: white;
  width: 100px;
}
</style>